<template>
  <el-select
    class="sn8-select"
    @change="handleChanged"
    clearable
    filterable
    remote
    :remote-method="loadSN8List"
    :placeholder="$t('mike.sn8')"
    v-model="sn8"
  >
    <el-option
      :key="item.value"
      :label="item.value"
      :value="item.value"
      v-for="item in sn8List"
    >
      <div class="sn8-select-item">
        <span>{{ item.value }}</span>

        <span>{{ item.label }}</span>

      </div>
    </el-option>
  </el-select>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
export default {
  name: 'Sn8Select',
  mixins: [mixinViewModule],
  props: {
    sn8: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      loading: false,
      sn8List: [],
      // sn8: ''
      form: {
        name: ''
      }
    }
  },
  mounted () {
    this.loadSN8List()
  },
  methods: {
    handleChanged () {
      this.$emit('update:sn8', this.sn8)
      this.$emit('change', this.sn8)
    },

    loadSN8List (query) {
      this.$http
        .post(`${this.mikeNetworkBase}/midea/menu/sn8/get/all`, {
          currentPage: 1,
          pageSize: 100,
          sn8: query
        })
        .then(({ data: res }) => {
          if (res.code !== 200) {
            this.sn8List = []
            return
          }

          this.sn8List = res.data.map(item => {
            return { value: item.sn8, label: item.name }
          })
        })
    }
  }
}
</script>

<style scoped lang="scss">
.sn8-select-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  span {
    &:first-child {
    }
    &:last-child {
      font-size: 12px;
      color: #999999;
    }
  }
}
</style>
